<!--
 * @Author: your name
 * @Date: 2021-09-08 11:22:31
 * @LastEditTime: 2021-09-18 16:01:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \caigou-fabricjs\src\views\Home.vue
-->
<template>
  <div class="home">
    <van-tabbar v-model="activeTab">
      <van-tabbar-item icon="card" @click="selectTab(0)">背景</van-tabbar-item>
      <van-tabbar-item icon="font" @click="selectTab(1)">文字</van-tabbar-item>
      <van-tabbar-item icon="photo" @click="selectTab(2)">图片</van-tabbar-item>
      <van-tabbar-item icon="award" @click="selectTab(3)">功能</van-tabbar-item>
    </van-tabbar>
    <div class="canvas-wrapper">
      <canvas id="canvas" width="300" height="400"></canvas>
    </div>
    <div class="info" v-if="info.height">
      <ul>
        <li>高度：{{ (info.height * info.scaleX).toFixed(1) || "" }}</li>
        <li>宽度：{{ (info.width * info.scaleY).toFixed(1) || "" }}</li>
        <li>x：{{ info.left.toFixed(1) || "" }}</li>
        <li>y：{{ info.top.toFixed(1) || "" }}</li>
      </ul>
    </div>
    <div class="button">
      <van-button type="warning" @click="delActive">删除选中项</van-button
      >&nbsp;
      <van-button type="danger" @click="delAll">清除所有项</van-button>
    </div>
    <div class="button">
      <van-button type="primary" @click="saveImage">保存方式一</van-button
      >&nbsp;
      <van-button type="primary" @click="saveImage2">保存方式二</van-button>
    </div>
    <div class="form-wrapper">
      <van-form @submit="onSubmit">
        <van-field
          v-model="canvasHeight"
          name="高度"
          label="画布高度"
          placeholder="请填写高度"
          :rules="[{ required: true, message: '请填写高度' }]"
        />
        <van-field
          v-model="canvasWidth"
          name="宽度"
          label="画布宽度"
          placeholder="请填写宽度"
          :rules="[{ required: true, message: '请填写宽度' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit"
            >更新</van-button
          >
        </div>
      </van-form>
    </div>
    <!-- 图案popup -->
    <van-popup
      v-model="showImages"
      closeable
      position="bottom"
      :style="{ height: '40%' }"
    >
      <div class="logo-image-wrapper">
        <div class="title">请选择要上传的图片</div>
        <van-uploader :after-read="afterRead" />
      </div>
      <div class="title">使用预设的图片</div>
      <div class="logo-image-list">
        <div class="image-wrap" @click="selectImage(Chinamobile)">
          <img :src="Chinamobile" />
        </div>
        <div class="image-wrap" @click="selectImage(imageDanghui)">
          <img :src="imageDanghui" />
        </div>
        <!-- <div class="image-wrap" @click="selectImage(imageLogo1)">
          <img :src="imageLogo1" />
        </div> -->
        <div class="image-wrap" @click="selectImage(imageLogo2)">
          <img :src="imageLogo2" />
        </div>
        <div class="image-wrap" @click="selectImage(imageLogo3)">
          <img :src="imageLogo3" />
        </div>
      </div>
    </van-popup>
    <!-- 文字popup -->
    <van-popup
      v-model="showText"
      closeable
      position="bottom"
      :safe-area-inset-bottom="true"
      :style="{ height: '40%' }"
    >
      <div class="color-container">
        <div class="title">请选择文字颜色</div>
        <van-radio-group v-model="fontColor" direction="horizontal">
          <van-radio name="black">黑色</van-radio>
          <van-radio name="white">白色</van-radio>
          <van-radio name="blue">蓝色</van-radio>
          <van-radio name="gold">金色</van-radio>
        </van-radio-group>
      </div>
      <div class="text-wrapper">
        <div class="border">
          <van-field
            v-model="textInput"
            label=""
            placeholder="请输入你喜欢的文字"
          />
        </div>
        <van-button round type="info" @click="selectText" class="text-btn"
          >添加</van-button
        >
      </div>
      <div class="text-image-list">
        <div
          class="image-wrap"
          v-for="(item, index) in fontList"
          @click="selectFont(index, item.class)"
          :key="index"
          :class="currntFont == index ? 'active' : ''"
        >
          <span :class="item.class" :style="{ fontFamily: item.class }">{{
            item.name + "----" + item.label
          }}</span>
        </div>
      </div>
    </van-popup>
    <!-- 背景popup -->
    <van-popup
      v-model="showBg"
      closeable
      position="bottom"
      :style="{ height: '40%' }"
    >
      <div class="logo-image-wrapper">
        <div class="title">请选择要上传的背景图片</div>
        <van-uploader :after-read="afterRead4Bg" />
      </div>
      <div class="title">使用预设的背景图片</div>
      <div class="bg-image-list">
        <div class="image-wrap" @click="selectBg(imageBg1)">
          <img :src="imageBg1" />
        </div>
        <div class="image-wrap" @click="selectBg(imageBg2)">
          <img :src="imageBg2" />
        </div>
        <div class="image-wrap" @click="selectBg(imageBg3)">
          <img :src="imageBg3" />
        </div>
        <div class="image-wrap" @click="selectBg(imageBg4)">
          <img :src="imageBg4" />
        </div>
        <div class="image-wrap" @click="selectBg(imageBg5)">
          <img :src="imageBg5" />
        </div>
        <div class="image-wrap" @click="selectBg(imageBg6)">
          <img :src="imageBg6" />
        </div>
        <div class="image-wrap" @click="selectBg(imageBg7)">
          <img :src="imageBg7" />
        </div>
        <div class="image-wrap" @click="selectBg(imageBg8)">
          <img :src="imageBg8" />
        </div>
      </div>
    </van-popup>
    <!-- 功能popup -->
    <van-popup
      v-model="showFeat"
      closeable
      position="bottom"
      :safe-area-inset-bottom="true"
      :style="{ height: '20%' }"
    >
      <div class="tag-wrap">
        <van-tag type="primary" size="large" @click="addText('usb充电')"
          >usb充电</van-tag
        ><van-tag type="primary" size="large" @click="addText('其他功能')"
          >其他功能</van-tag
        >
      </div>
    </van-popup>
  </div>
</template>

<script>
let image = require("./logo.png");
let imageDanghui = require("../assets/danghui.png");
let Chinamobile = require("../assets/Chinamobile.jpg");
let imageLogo1 = require("../assets/logo1.jpg");
let imageLogo2 = require("../assets/logo2.png");
let imageLogo3 = require("../assets/logo3.png");
let imageBg1 = require("../assets/bg1.png");
let imageBg2 = require("../assets/bg2.png");
let imageBg3 = require("../assets/bg3.png");
let imageBg4 = require("../assets/bg4.png");
let imageBg5 = require("../assets/bg5.png");
let imageBg6 = require("../assets/bg6.png");
let imageBg7 = require("../assets/jiangbei.jpg");
let imageBg8 = require("../assets/beizi.jpg");
import { fabric } from "fabric";
export default {
  name: "home",
  components: {},
  data() {
    return {
      Chinamobile: Chinamobile,
      image: image,
      imageDanghui: imageDanghui,
      imageLogo3: imageLogo3,
      imageLogo2: imageLogo2,
      imageLogo1: imageLogo1,
      imageBg1: imageBg1,
      imageBg2: imageBg2,
      imageBg3: imageBg3,
      imageBg4: imageBg4,
      imageBg5: imageBg5,
      imageBg6: imageBg6,
      imageBg7: imageBg7,
      imageBg8: imageBg8,
      info: {},
      currntFont: 0,
      textInput: "",
      showBg: false,
      showText: false,
      showImages: false,
      showFeat: false,
      activeTab: "",
      canvas: null,
      activeObj: null,
      fontList: [
        {
          name: "宋体",
          class: "SimSun",
          label: "中国移动"
        },
        {
          name: "华文楷体",
          class: "STKaiti",
          label: "中国移动"
        },
        {
          name: "华文宋体",
          class: "STSong",
          label: "中国移动"
        },
        {
          name: "隶书",
          class: "LiSu",
          label: "中国移动"
        },
        {
          name: "华文仿宋",
          class: "STFangsong",
          label: "中国移动"
        },
        {
          name: "黑体",
          class: "SimHei",
          label: "中国移动"
        },
        {
          name: "新宋体",
          class: "NSimSun",
          label: "中国移动"
        },
        {
          name: "仿宋",
          class: "FangSong",
          label: "中国移动"
        },
        {
          name: "楷体",
          class: "KaiTi",
          label: "中国移动"
        },
        {
          name: "微软正黑体",
          class: "Microsoft JhengHei",
          label: "中国移动"
        },
        {
          name: "微软雅黑体",
          class: "Microsoft YaHei",
          label: "中国移动"
        },
        {
          name: "幼圆",
          class: "YouYuan",
          label: "中国移动"
        },
        {
          name: "华文细黑",
          class: "STXihei",
          label: "中国移动"
        },
        {
          name: "华文楷体",
          class: "STKaiti",
          label: "中国移动"
        }
      ],
      fontColor: "black",
      canvasWidth: 300,
      canvasHeight: 400
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.canvas = new fabric.Canvas("canvas", {
        height: this.canvasHeight,
        width: this.canvasWidth
      });
      fabric.Object.prototype.transparentCorners = false;
      fabric.Object.prototype.cornerColor = "#1989fa";
      fabric.Object.prototype.cornerStyle = "circle";
      fabric.Object.prototype.cornerSize = "6";
      // fabric.Object.prototype.controls.clone = new fabric.Control({
      //   x: -0.5,
      //   y: -0.5,
      //   cursorStyle: "pointer",
      //   cornerSize: 12
      // });
      this.canvas.on({
        "object:moving": e => {
          this.info = e.target;
          this.$forceUpdate();
        }
      });
    },
    saveImage() {
      console.log(this.canvas.toDataURL("png"));
      const link = document.createElement("a");
      link.download = "canvas.png";
      link.href = this.canvas.toDataURL("png");
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    saveImage2() {
      localStorage.canvasUrl = this.canvas.toDataURL("png");
      this.$router.push({
        path: "about"
      });
    },
    delActive() {
      if (this.canvas.getActiveObject()) {
        this.activeObj = this.canvas.getActiveObject();
        this.canvas.remove(this.activeObj);
        this.canvas.renderAll();
        this.info = {};
      } else {
        // alert('请选择要删除的元素')
      }
    },
    delAll() {
      this.canvas.clear();
    },
    selectTab(type) {
      if (type == 3) {
        this.showFeat = true;
      }
      if (type == 2) {
        this.showImages = true;
      }
      if (type == 1) {
        this.showText = true;
      }
      if (type == 0) {
        this.showBg = true;
      }
    },
    selectImage(image) {
      fabric.Image.fromURL(
        image,
        oImg => {
          oImg.scale(0.2);
          this.canvas.add(oImg);
          this.showImages = false;
        },
        { crossOrigin: "anonymous", top: 180, left: 180 }
      );
    },
    selectText() {
      if (this.textInput) {
        var comicSansText = new fabric.Textbox(this.textInput, {
          fontFamily: this.fontFamily,
          fill: this.fontColor,
          top: 160,
          left: 80
        });
        this.canvas.add(comicSansText);
        this.textInput = "";
      }
    },
    addText(str) {
      // 添加文本
      var comicSansText = new fabric.Textbox(str, {
        fontFamily: "SimSun",
        fill: this.fontColor,
        top: 160,
        left: 80
      });
      this.canvas.add(comicSansText);
      this.showFeat = false;
    },
    selectBg(image) {
      fabric.Image.fromURL(
        image,
        img => {
          this.canvas.setBackgroundImage(
            image,
            this.canvas.renderAll.bind(this.canvas),
            {
              scaleX: this.canvas.width / img.width,
              scaleY: this.canvas.height / img.height
            }
          );
        },
        { crossOrigin: "anonymous" }
      );
    },
    selectFont(font, className) {
      this.currntFont = font;
      this.fontFamily = className;
    },
    onSubmit() {
      this.canvas.setWidth(this.canvasWidth);
      this.canvas.setHeight(this.canvasHeight);
    },
    afterRead(file) {
      console.log(file);
      fabric.Image.fromURL(
        file.content,
        oImg => {
          oImg.scale(0.2);
          this.canvas.add(oImg);
          this.showImages = false;
        },
        { crossOrigin: "anonymous", top: 160, left: 80 }
      );
    },
    afterRead4Bg(file) {
      console.log(file);
      fabric.Image.fromURL(
        file.content,
        oImg => {
          this.canvas.setBackgroundImage(
            oImg,
            this.canvas.renderAll.bind(this.canvas),
            {
              scaleX: this.canvas.width / oImg.width,
              scaleY: this.canvas.height / oImg.height
            }
          );
        },
        { crossOrigin: "anonymous" }
      );
    }
  }
};
</script>
<style lang="stylus" scoped>
.border
  border 1px solid #000000 !important
  width: 100%
.home
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top 1.5rem
  .canvas-wrapper
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: .0625rem solid #ebedf0;

  .button
    margin-top: .75rem;
    display flex
    flex-direction row
    justify-content start
  .logo-image-wrapper
    margin-top 2.5rem
  .logo-image-list
    padding .75rem 1.5rem
    display: flex;
    justify-content flex-start;
    align-items center
    flex-direction row
    .image-wrap
      width 5rem
      margin-right .75rem
      img
        width 100%
  .bg-image-list
    padding .75rem 1.5rem
    display: flex;
    justify-content flex-start;
    align-items center
    flex-direction row
    flex-wrap wrap
    .image-wrap
      width 5rem
      // margin-left .75rem
      img
        width 100%
  .color-container
    margin-top 2rem
    padding-left .75rem
    .title
      text-align left
      padding .75rem
  .text-wrapper
    padding .75rem
    display: flex;
    justify-content flex-start;
    align-items center
    flex-direction row
  .text-image-list
    color #000000
    .image-wrap
      line-height 1.875rem
    .active
      border .0625rem solid #000000
  .text-btn
    width 6.25rem !important
  .form-wrapper
    padding-bottom 2.75rem
  .tag-wrap
    margin-top 2.5rem
    margin-left 1rem
    display: flex;
    justify-content flex-start;
    align-items center
    flex-direction row
</style>
